<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            border: 1px solid #a0e274;
            width: 500px;
            height: 309px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -154.5px 0 0 -250px;
            background: #a0e274;
        }

        body {
            background: #a0e274;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <img style="width: 330px;height: 100px" src="../img/mylife.png">
        <br><br>
        <el-input class="box" placeholder="请输入用户名" v-model="ruleForm.username" maxlength="12" clearable>
            <template slot="prepend">用户名</template>
        </el-input>
        <br><br>
        <el-input class="box" placeholder="请输入密码" v-model="ruleForm.password" maxlength="12" show-password>
            <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
        </el-input>
        <br><br>
        <el-button style="width: 330px" class="box" type="primary" @click="login">登录</el-button><br><br>
        <el-button style="width: 330px" class="box" type="success" @click="register">注册</el-button>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            ruleForm: {
                username: "",
                password: ""
            }
        },
        methods: {
            login() {
                if (this.ruleForm.username === "") {
                    this.$message.warning("用户名不能为空！");
                    return;
                }
                if (this.ruleForm.password === "") {
                    this.$message.warning("密码不能为空！");
                    return;
                }
                axios.post('https://3723r72n06.picp.vip/mylife/user/login', this.ruleForm, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                        setTimeout(() => {
                            location.href = "../options/options.html";
                        }, 1000);
                    } else if (response.data.code == 1002 || response.data.code == 1000) {
                        this.$message.warning(response.data.msg);
                    }
                });
            },
            register() {
                setTimeout(() => {
                    location.href = "../register/register.html";
                }, 100);
            }
        }
    });
</script>
</html>